<template>

  <header class="adminui-header">
    <div class="adminui-header-left">
      <div class="logo-bar">
        <img class="logo" src="/img/logo.png" />
        <span>山西省交通信息通信有限公司|项目管理平台</span>
      </div>
      <div class="panel-item hidden-sm-and-down" @click="
						$store.commit(
							'TOGGLE_menuIsCollapse',
							!$store.state.global.menuIsCollapse
						)
					">
        <el-icon>
          <indent v-if="menuIsCollapse" />
          <outdent v-else />
        </el-icon>
      </div>
      <div class="panel-item hidden-sm-and-down" @click="refreshTab()">
        <el-icon>
          <refresh />
        </el-icon>
      </div>
    </div>

    <div class="adminui-header-right">
      <userbar></userbar>
    </div>
  </header>
  <div class="default-all">
    <div class="default-left">
      <el-container class="jp-container" ref="leftContainer" v-loading="loading">

        <el-main class="nopadding" style=" padding-top: 20px;">
          <el-tree ref="officeTree" node-key="id" default-expand-all :data="dataList" check-strictly :props="treeProps"
            :draggable="hasPermission('sys:office:edit')" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode"
            @node-click="nodeClick" @node-drop="nodeDrop">
            <template #default="{ node, data }">
              <span class="custom-tree-node el-tree-node__label">
                <span class="label" v-bind:class="{
            grey: data.useable === '0',
          }">
                  <el-icon class="m-r-5">
                    <qiye v-if="data.type === '1'" :style="{
                color:
                  $TOOL.data.get(
                    'IS_PRIMARY_TENANT'
                  ) &&
                  data.tenantDTO &&
                  $utils.getTenantColorById(
                    data.tenantDTO.id
                  ),
              }">
                    </qiye>
                    <bumen v-else :style="{
                color:
                  $TOOL.data.get(
                    'IS_PRIMARY_TENANT'
                  ) &&
                  data.tenantDTO &&
                  $utils.getTenantColorById(
                    data.tenantDTO.id
                  ),
              }">
                    </bumen>
                  </el-icon>
                  {{ node.label }}
                </span>
                <span class="do" v-if="hasPermission('sys:office:add')">
                  <el-icon @click.stop="bindShowDetails(node, data)" :size="25">
                    <CaretRight></CaretRight>
                  </el-icon>
                </span>
              </span>
            </template>
          </el-tree>
        </el-main>

      </el-container>
    </div>
    <div class="default-right">
      <div class="primary">
      <!-- // <el-button type="primary" @click="initCharts">
        //   <el-icon>
        //     <refresh />
        //   </el-icon>刷新数据</el-button>-->

        <el-date-picker v-model="year" type="year" placeholder="选择年份" format="YYYY" value-format="YYYY" @change="handleYearChange"
          style="width: 120px; margin-left: 10px;"></el-date-picker>
      </div>
      <div style="overflow-x: hidden;" v-if="!isOffice">
        <!-- 顶部数据卡片 -->
        <div class="data-cards">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="long-card blue">
                <div class="title">年度项目总数</div>
                <div class="number">{{info.count?info.count:0}}</div>
                <div class="trend up">
                  <i class="el-icon-top"></i>
                  <!-- 较上年增长 158%-->
                </div>
              </div>
              <div>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <div class="data-card">
                      <div class="title">在建项目</div>
                      <div class="number blue">{{info.construction?info.construction:0}}</div>
                      <div class="trend up">
                        <i class="el-icon-top"></i>
                        <!-- 较上年增长 158%-->
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="data-card">
                      <div class="title">交工项目</div>
                      <div class="number green">{{info.handOver?info.handOver:0}}</div>
                      <div class="trend up">
                        <i class="el-icon-top"></i>
                        <!-- 较上年增长 158%-->
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="data-card">
                      <div class="title">竣工项目</div>
                      <div class="number green">{{info.completion?info.completion:0}}</div>
                      <div class="trend up">
                        <i class="el-icon-top"></i>
                        <!-- 较上年增长 158%-->
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div class="data-card bottom">
                    <div class="title">项目金额</div>
                    <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                    <div class="trend up">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="data-card bottom">
                    <div class="title">开票金额</div>
                    <div class="number blue">{{info.ticketAmount?info.ticketAmount:0}}</div>
                    <div class="trend up blue">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="data-card bottom">
                    <div class="title">回款金额</div>
                    <div class="number purple">{{info.paymentAmt?info.paymentAmt:0}}</div>
                    <div class="trend up purple">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="data-card">
                    <div class="title">预算成本</div>
                    <div class="number blue">{{info.directCost?info.directCost:0}}</div>
                    <div class="trend up blue">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="data-card">
                    <div class="title">收票成本</div>
                    <div class="number green2">{{info.receiptAmount?info.receiptAmount:0}}</div>
                    <div class="trend up green2">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="data-card">
                    <div class="title">实际支付</div>
                    <div class="number blue2">{{info.actualPayment?info.actualPayment:0}}</div>
                    <div class="trend up blue2">
                      <i class="el-icon-top"></i>
                      <!-- 较上年增长 158%-->
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <div class="lang-padding">
                <div class="long-card orange">
                  <div class="title">年度新签合同完成情况</div>
                  <div class="number">526</div>
                  <div class="trend up">
                    <i class="el-icon-top"></i>
                    <!-- 较上年增长 158%-->
                  </div>
                </div>
                <div>
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title sm">年度新签合同总额</div>
                        <div class="number  sm">286</div>

                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title sm">本季新签合同总额</div>
                        <div class="number  sm">142</div>

                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title">本月新签合同总额</div>
                        <div class="number ">142</div>

                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 中间部分 -->
        <div class="middle-section">
          <el-row :gutter="20">
            <!-- 左侧项目分布 -->
            <el-col :span="8">
              <div class="chart-card project-distribution">
                <div class="card-title">集团内外项目分布</div>
                <div class="distribution-list">
                  <!-- 集团内项目 -->
                  <div class="project-item">
                    <div class="item-header">
                      <div class="dot-label">
                        <span class="dot"></span>
                        <span>集团内项目</span>
                      </div>
                      <div class="percentage">{{ getGroupInPercent() }}</div>
                    </div>
                    <div class="progress-bar">
                      <div class="progress" :style="{width:getGroupInPercent()}"></div>
                    </div>
                    <div class="item-footer">
                      <div class="count">项目数: {{info.groupIn}}个</div>
                      <div class="amount">金额:{{info.internalContractAmt}}元</div>
                    </div>
                  </div>

                  <!-- 集团外项目 -->
                  <div class="project-item">
                    <div class="item-header">
                      <div class="dot-label">
                        <span class="dot"></span>
                        <span>集团外项目</span>
                      </div>
                      <div class="percentage">{{getGroupOutPercent()}}</div>
                    </div>
                    <div class="progress-bar">
                      <div class="progress" :style="{width:getGroupOutPercent()}"></div>
                    </div>
                    <div class="item-footer">
                      <div class="count">项目数: {{info.groupOut}}个</div>
                      <div class="amount">金额: {{info.externalContractAmt}}元</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

            <!-- 中间收支趋势图 -->
            <el-col :span="8">
              <div class="chart-card">
                <div class="card-title">年度收支趋势</div>
                <div id="trendChart">
                  <LineEchert v-if="echartsData.xaxis" :echartsData="echartsData" id="line1" />
                </div>
              </div>
            </el-col>

            <!-- 右侧完成情况 -->
            <el-col :span="8">
              <div class="lang-padding">
                <div class="long-card orange">
                  <div class="title">年度新签合同完成情况</div>
                  <div class="number">526</div>
                  <div class="trend up">
                    <i class="el-icon-top"></i>
                    较上年增长 158%
                  </div>
                </div>
                <div>
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title">年度新签合同总额</div>
                        <div class="number ">286</div>

                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title">本季新签合同总额</div>
                        <div class="number green">142</div>

                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card bottom">
                        <div class="title">本月新签合同总额</div>
                        <div class="number green">142</div>

                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 底部图表 -->
        <div class="bottom-section">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="chart-card">
                <div class="card-title">项目类型占比</div>
                <div class="chart-content">
                  <PieEchert v-if="pieData.length>0" :echartsData="pieData" id="pie1" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="chart-card">
                <div class="card-title">成本分析</div>
                <div id="chart2">
                  <LineEchert v-if="costData.xaxis" :echartsData="costData" id="line2" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="chart-card">
                <div class="card-title">指标完成情况排名</div>
                <div id="chart3">
                  <BarEchert v-if="rankData.xaxis" :echartsData="rankData" id="bar1" />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

        
        <div style="overflow-x: hidden;" v-if="isOffice">
          <!-- 顶部数据卡片 -->
          <div class="data-cards">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="long-card blue">
                  <div class="title">年度项目总数</div>
                  <div class="number">{{info.count?info.count:0}}</div>
                  <div class="trend up">
                    <i class="el-icon-top"></i>
                    <!-- 较上年增长 158%-->
                  </div>
                </div>
                <div>
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="data-card">
                        <div class="title">在建项目</div>
                        <div class="number blue">{{info.construction?info.construction:0}}</div>
                        <div class="trend up">
                          <i class="el-icon-top"></i>
                          <!-- 较上年增长 158%-->
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card">
                        <div class="title">交工项目</div>
                        <div class="number green">{{info.handOver?info.handOver:0}}</div>
                        <div class="trend up">
                          <i class="el-icon-top"></i>
                          <!-- 较上年增长 158%-->
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="data-card">
                        <div class="title">竣工项目</div>
                        <div class="number green">{{info.completion?info.completion:0}}</div>
                        <div class="trend up">
                          <i class="el-icon-top"></i>
                          <!-- 较上年增长 158%-->
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="16">
                <el-row :gutter="10">
                  <el-col :span="6">
                    <div class="data-card bottom  office">
                      <div class="title">新签合同目标金额</div>
                      <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      <div class="card-content">
                        <div class="title">新签合同目标完成金额</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                        <div class="title">新签合同目标完成金率</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-card bottom  office">
                      <div class="title">营收目标金额</div>
                      <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      <div class="card-content">
                        <div class="title">营收目标完成金额</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                        <div class="title">营收目标完成金额率</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-card bottom  office">
                      <div class="title">回款目标金额</div>
                      <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      <div class="card-content">
                        <div class="title">回款目标完成金额</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                        <div class="title">回款目标完成金额率</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="data-card bottom  office">
                      <div class="title">预计毛利润目标金额</div>
                      <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      <div class="card-content">
                        <div class="title">预计毛利润目标完成金额</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                        <div class="title">预计毛利润目标完成金额率</div>
                        <div class="number ">{{info.contractAmount?info.contractAmount:0}}</div>
                      </div>
                    </div>
                  </el-col>
               
                </el-row>
              </el-col>
          
            </el-row>
          </div>
  
          <!-- 中间部分 -->
          <div class="middle-section">
            <el-row :gutter="20">
              <!-- 左侧项目分布 -->
              <el-col :span="8">
                <div class="chart-card project-distribution">
                  <div class="card-title">集团内外项目分布</div>
                  <div class="distribution-list">
                    <!-- 集团内项目 -->
                    <div class="project-item">
                      <div class="item-header">
                        <div class="dot-label">
                          <span class="dot"></span>
                          <span>集团内项目</span>
                        </div>
                        <div class="percentage">{{ getGroupInPercent() }}</div>
                      </div>
                      <div class="progress-bar">
                        <div class="progress" :style="{width:getGroupInPercent()}"></div>
                      </div>
                      <div class="item-footer">
                        <div class="count">项目数: {{info.groupIn}}个</div>
                        <div class="amount">金额:{{info.internalContractAmt}}元</div>
                      </div>
                    </div>
  
                    <!-- 集团外项目 -->
                    <div class="project-item">
                      <div class="item-header">
                        <div class="dot-label">
                          <span class="dot"></span>
                          <span>集团外项目</span>
                        </div>
                        <div class="percentage">{{getGroupOutPercent()}}</div>
                      </div>
                      <div class="progress-bar">
                        <div class="progress" :style="{width:getGroupOutPercent()}"></div>
                      </div>
                      <div class="item-footer">
                        <div class="count">项目数: {{info.groupOut}}个</div>
                        <div class="amount">金额: {{info.externalContractAmt}}元</div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
  
              <!-- 中间收支趋势图 -->
              <el-col :span="8">
                <div class="chart-card">
                  <div class="card-title">年度收支趋势</div>
                  <div id="trendChart">
                    <LineEchert v-if="echartsData.xaxis" :echartsData="echartsData" id="line1" />
                  </div>
                </div>
              </el-col>
  
              <!-- 右侧完成情况 -->
              <el-col :span="8">
                <div class="lang-padding">
                  <div class="long-card orange">
                    <div class="title">年度新签合同完成情况</div>
                    <div class="number">526</div>
                    <div class="trend up">
                      <i class="el-icon-top"></i>
                      较上年增长 158%
                    </div>
                  </div>
                  <div>
                    <el-row :gutter="10">
                      <el-col :span="8">
                        <div class="data-card bottom">
                          <div class="title">年度新签合同总额</div>
                          <div class="number ">286</div>
  
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="data-card bottom">
                          <div class="title">本季新签合同总额</div>
                          <div class="number green">142</div>
  
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="data-card bottom">
                          <div class="title">本月新签合同总额</div>
                          <div class="number green">142</div>
  
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
  
          <!-- 底部图表 -->
          <div class="bottom-section">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="chart-card">
                  <div class="card-title">项目类型占比</div>
                  <div class="chart-content">
                    <PieEchert v-if="pieData.length>0" :echartsData="pieData" id="pie1" />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="chart-card">
                  <div class="card-title">成本分析</div>
                  <div id="chart2">
                    <LineEchert v-if="costData.xaxis" :echartsData="costData" id="line2" />
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="chart-card">
                  <div class="card-title">指标完成情况排名</div>
                  <div id="chart3">
                    <BarEchert v-if="rankData.xaxis" :echartsData="rankData" id="bar1" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>





    </div>
  </div>

  <!-- 自定义项目列表弹窗 -->
  <div class="custom-dialog-overlay" ref="customDrawer" v-if="projectDialogVisible" :style="{left:rightPosition+'px'}">
    <div class="custom-dialog">
      <!-- 项目列表内容 -->
      <div class="dialog-body">
        <!-- 搜索栏 -->
        <div class="drawer-close right" @click="projectDialogVisible = false">×</div>
        <div class="search-area">
          <div class="search-row">
            <div class="search-item">
              <div class="search-label">项目名称</div>
              <input type="text" class="search-input" placeholder="请输入项目名称" v-model="tablePage.projectName">
            </div>
            <div class="search-item">
              <div class="search-label">项目状态</div>
              <select class="search-select">
                <option value="">请选择</option>
              </select>
            </div>
          </div>

          <div class="button-group">
            <button class="search-btn primary" @click="">查询</button>
            <button class="search-btn default">重置</button>
          </div>
        </div>

        <!-- 项目列表 -->
        <div class="project-table">
          <table>
            <tbody>
              <tr v-for="(item, index) in projectList" :key="index" @click="handleContractClick(item)" class="project-row">
                <td class="project-name">
                  <div>{{ item.projectName }}</div>
                  <div>   <el-icon @click.stop="openProjectDetail(item)" :size="15">
                    <CaretRight></CaretRight>
                  </el-icon> 
                  </div>
                  </td>
              </tr>
              
            </tbody>
          </table>
          <div v-if="projectList.length==0">
          <el-empty></el-empty>
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="table-footer">
          <div class="page-info">下页合同总计：{{ total }}条</div>
        </div>
      </div>
    </div>
  </div>


  <!-- 右侧详情抽屉 -->
  <div class="custom-drawer" v-if="drawerVisible" :style="{left:drawerRightPosition+'px'}">
    <div class="drawer-content">
      <div class="drawer-tabs">
        <div class="drawer-tab active">
          <div class="blue-circle"></div>
          <span>{{ getCurrentContractName() }}</span>
        </div>
        <div class="drawer-close" @click="drawerVisible = false">×</div>
      </div>
      
      <div class="contract-items">
        <div 
          class="contract-item" 
          v-for="(contract, index) in contractItems" 
          :key="index" 
          :class="{ 'active': selectedContractId === contract.contractNo }"
          @click="handleNextCourent(contract)">
          {{ contract.contractName }}
        </div>
      </div>
      
   
    </div></div>

</template>

<script>
import * as echarts from 'echarts'
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import officeService from "@/api/sys/officeService";
import getProject from "@/api/scroll/index"
import moment from "moment";
import projectMainService from '@/api/project/projectMainService'
import tPurchaseContractService from '@/api/contract/tPurchaseContractService'  
import LineEchert from "./components/lineEchert.vue";
import BarEchert from "./components/barEchert.vue";
import PieEchert from "./components/pieEchert.vue";
import common from '@/utils/common'
import userbar from "../../layout/components/userbar.vue";
import { settings } from 'nprogress';
export default {
  name: 'CompanyView',
  components: { Splitpanes, Pane, LineEchert, PieEchert, BarEchert, userbar },
  data() {
    return {
      dataList: [],
      loading: false,
      leftContainer: null,
      rightPosition: 0,
      customDrawer: null,
      drawerRightPosition: 0,
      treeProps: {
        label: (data) => {
          return data.name;
        },
      },
      echartsData: {
        xaxis: null,
        series: [

        ]
      },
      pieData: [

      ],
      costData: {
        xaxis: null,
        series: [

        ]
      },
      rankData: {
        xaxis: null,
        series: [
          {
            name: '新签合同',
            data: [280, 290, 300, 320, 280, 270, 260]
          },
          {
            name: '营收',
            data: [120, 130, 140, 160, 120, 150, 140]
          }
        ]
      },
      info: {},
      projectDialogVisible: false,
      drawerVisible: false,
      projectList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      contractItems: [

      ],
      selectedContractId: 'HT202312502', // 默认选中第二个合同
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        orders: [{ column: "a.create_time", asc: false }],
        projectName: ''
      },
      year: moment().format("YYYY").toString(),
      isOffice:false
    }
  
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    pageButtons() {
      const buttons = [];
      const maxButtons = 5;

      let start = Math.max(1, this.currentPage - Math.floor(maxButtons / 2));
      let end = Math.min(this.totalPages, start + maxButtons - 1);

      if (end - start + 1 < maxButtons) {
        start = Math.max(1, end - maxButtons + 1);
      }

      for (let i = start; i <= end; i++) {
        buttons.push(i);
      }

      return buttons;
    }
  },
  mounted() {
    this.initCharts()
    this.getDataList()
    this.leftContainer = this.$refs.leftContainer;
    let position = common.getElementPosition(this.$refs.leftContainer)
    this.rightPosition = position.left + 286;
    // custom-drawer

    this.drawerRightPosition = this.rightPosition + 547;
  },
  methods: {
    async initCharts(id) {
      // 初始化各个图表
      var res = await getProject.getDeptLarge({ year: this.year, id: id?id:"" })

      this.info = res;
      res.projectTypeRatio.forEach(item => {
        item.name = this.$dictUtils.getDictLabel("project_type", item.projectType, '-')
        item.value = item.count
      })


      this.pieData = res.projectTypeRatio;
     
      setTimeout(() => {
        this.echartsData.series[0] = {
          name: '收入',
          data: res.payExpandTrend.paymentAmt
        }
        this.echartsData.series[1] = {
          name: '支出',
          data: res.payExpandTrend.actualPayment
        };
        this.echartsData.xaxis = res.payExpandTrend.month;


    
      }, 0)


      setTimeout(() => {
        this.costData.series[0] = { name: "人工成本", data: res.costAnalysis.laborCost }
        this.costData.series[1] = { name: "材料成本", data: res.costAnalysis.materialCost }
        this.costData.series[2] = { name: "技术服务成本", data: res.costAnalysis.serviceFee }
        this.costData.series[3] = { name: "管理成本", data: res.costAnalysis.managementFee }
        this.costData.series[4] = { name: "安全成本", data: res.costAnalysis.safetyFee }
        this.costData.series[5] = { name: "保险成本", data: res.costAnalysis.insurance }
        this.costData.series[6] = { name: "其他成本", data: res.costAnalysis.other }
        this.costData.xaxis = res.costAnalysis.month;
      }, 0)



      setTimeout(() => {
        this.rankData.xaxis = ['智慧运营部', '第六分公司', '第五分公司', '第四分公司', '第三分公司', '第二分公司', '第一分公司']
      }, 1000)

    },
    //加载树数据
    async getDataList() {
      this.loading = true;
      // , type: 1 
      var data = await officeService.treeData({ showAll: "1" });
      this.loading = false;

    
      this.dataList = data;
    },
    //树点击
    nodeClick(val) {
      console.log(222, val)
    
      if(val.type==1){
        this.isOffice=false
        this.initCharts()
      }else{
        this.isOffice=true
      }

    },
    bindShowDetails(node,val){
 this.projectDialogVisible = true;

      this.getProjectList(val.id)
    },
    getProjectList(val) {
      projectMainService.list({
        'current': this.tablePage.currentPage,
        'size': this.tablePage.pageSize,
        office: { id: val },
        projectName: this.tablePage.projectName,
      }).then((data) => {
        this.projectList = data.records
        this.total = data.total

      })
    },
    handleClose() {
      this.projectDialogVisible = false;
    },
    openProjectDetail(item) {
      tPurchaseContractService.list({'current': 1,
      'size': 100,contractFeature:2,project:{id:item.id}}).then(data=>{
        this.drawerVisible = true;
        this.contractItems= data.records
      // 默认选中第一份合同
      // if (this.contractItems.length > 0) {
      //   this.selectedContractId = this.contractItems[0].contractNo;
      // }
      })
      
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.pageSize = val;
      // 这里可以重新加载数据
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
      // 这里可以重新加载数据
    },
    // 添加 add 方法
    add(node, data) {
      // 显示项目列表弹窗
      this.projectDialogVisible = true;
      // 加载该节点下的项目列表数据
      this.loadProjectList(data);
    },
    // 加载项目列表
    loadProjectList(data) {
      // 可以根据节点数据动态加载该部门/公司下的项目
      this.projectList = [
        {
          projectName: '太原高速公路管理有限公司哈嘎大桥段、南武收费站视频监控设备及安装...',
          projectCode: 'P2023001',
          projectStatus: '审批中'
        },
        {
          projectName: '山西高速集团阳泉有限责任公司阳王主收费站收费设施智能化改造工程施工项目',
          projectCode: 'P2023002',
          projectStatus: '审批中'
        },
        {
          projectName: '忻州高速公路管理有限公司2023年度部分收费站收费、治超设备升级改造工程',
          projectCode: 'P2023003',
          projectStatus: '执行中'
        }
      ];
      this.total = this.projectList.length;
    },
    // 树节点拖拽事件
    nodeDrop(draggingNode, dropNode, dropType) {
      // 实现节点拖拽逻辑

    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    selectContract(contract) {
      this.selectedContractId = contract.contractNo;
      // 可以在这里添加选中合同后的其他逻辑
    },
    handleContractClick(contract) {
      this.selectContract(contract);

      // 跳转到合同详情页面
      this.$router.push({
        path: '/contract',
        query: { id: contract.id,basisType:contract.basisType}
      });


    },
    handleNextCourent(contract) {
      // this.selectContract(contract);

      // 跳转到合同详情页面
      this.$router.push({
        path: '/purchaseDetails/purchaseDetails',
        query: { projectId: contract.project.id,id:contract.id,purchaseId:contract.purchase.id}
      });


    },
    getCurrentContractName() {
      const contract = this.contractItems.find(item => item.contractNo === this.selectedContractId);
      return contract ? contract.contractName : '合同详情';
    },
    handleContractDetails() {
      // 如果有选中的合同，跳转到详情页
      if (this.selectedContractId) {
        const contract = this.contractItems.find(item => item.contractNo === this.selectedContractId);
        if (contract) {
          this.handleContractClick(contract);
        }
      }
    },
    getGroupInPercent() {
      const inCount = Number(this.info.groupIn) || 0;
      const outCount = Number(this.info.groupOut) || 0;
      const total = inCount + outCount;
      if (total === 0) return '0.0%';
      return ((inCount / total) * 100).toFixed(1) + '%';
    },
    getGroupOutPercent() {
      const inCount = Number(this.info.groupIn) || 0;
      const outCount = Number(this.info.groupOut) || 0;
      const total = inCount + outCount;
      if (total === 0) return '0.0%';
      return ((outCount / total) * 100).toFixed(1) + '%';
    }
    ,
    handleYearChange(val) {
      this.year = val;
      this.initCharts();
    }
  }
}
</script>

<style scoped>
.default-all {
  display: flex;
}
.default-left {
  width: 300px;
  margin-right: 20px;
  flex-shrink: 0;
}
.default-right {
  flex: 1;
}
.primary {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 30px;
}
.company-container {
  padding: 20px;
  background: #f0f2f5;
}

.data-card {
  height: 148px;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.data-card.office{
  height: 305px;
  background: #DBEAFE;
  color: #2563EB;
  font-size: 14px;
  margin-bottom: 0;

}
.card-content{
  padding-top: 20px;
  border-top: 1px solid #2563EB;
}

.data-card.office.green{
  background: #DCFCE7;
  color: #22C55E;
}
.data-card.office.green .card-content{
  border-top: 1px solid #22C55E;
}

.data-card.office.orange{
  background: #DCFCE7;
  color: #22C55E;
}
.data-card.office.orange .card-content{
  border-top: 1px solid #22C55E;
}

.data-card.office.pink{
  background: #DCFCE7;
  color: #22C55E;
}
.data-card.office.pink .card-content{
  border-top: 1px solid #22C55E;
}


.data-card.office  .card-content .title{
  font-size: 14px;
  color: #666;
}
.data-card.office  .card-content .number{
  font-size: 28px;
}
.bottom {
  margin-bottom: 10px;
}

.data-card .title {
  color: rgba(107, 114, 128, 1);
  font-size: 16px;
}

.data-card .number {
  font-size: 36px;
  font-weight: bold;
  margin: 3px 0;
}
.data-card .blue {
  color: rgba(37, 99, 235, 1) !important;
}
.data-card .green {
  color: rgba(34, 197, 94, 1) !important;
}
.data-card .purple {
  color: rgba(168, 85, 247, 1) !important;
}
.data-card .green2 {
  color: rgba(20, 184, 166, 1) !important;
}
.data-card .blue2 {
  color: rgba(99, 102, 241, 1) !important;
}

.data-card .trend {
  font-size: 14px;
}

.trend.up {
  color: rgba(34, 197, 94, 1);
}

.chart-card {
  height: 300px;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.chart-content {
  flex: 1;
  height: calc(100% - 36px);
  position: relative;
}

.card-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
  height: 20px;
}

.completion-rate {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  padding: 40px 0;
}
.data-cards {
  margin-bottom: 20px;
}
.lang-padding {
  padding: 10px;
  border: 1px solid #e8e8e8;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.lang-padding .bottom {
  height: 116px;
}
.long-card {
  width: 100%;
  height: 148px;
  padding: 20px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 10px;
}
.long-card.blue {
  background: rgba(2, 77, 204, 1);
}
.long-card.orange {
  background: rgba(237, 114, 0, 1);
}
.long-card .title {
  color: #fff;
  font-size: 16px;
}

.long-card .number {
  font-size: 36px;
  margin: 6px 0;
}

.long-card .trend {
  font-size: 14px;
  color: rgba(34, 197, 94, 1);
}

.project-distribution {
  height: 300px;
  padding: 20px;
}

.distribution-list {
  padding: 10px 0;
}

.project-item {
  margin-bottom: 20px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dot-label {
  display: flex;
  align-items: center;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  margin-right: 8px;
}

.project-item:nth-child(2) .dot {
  background-color: #10b981;
}

.percentage {
  color: #10b981;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f3f4f6;
  border-radius: 3px;
  margin-bottom: 8px;
}

.progress {
  height: 100%;
  background-color: #10b981;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  color: #6b7280;
  font-size: 14px;
}

.count,
.amount {
  color: #6b7280;
}
.lang-padding .data-card .title {
  font-size: 14px;
}
.lang-padding .data-card .number {
  color: rgba(34, 197, 94, 1);
  font-size: 26x;
  font-weight: bold;
}
.lang-padding .data-card {
  background: #f3f3f3;
}

/* 自定义弹窗样式 - 使用固定值定位 */
.custom-dialog-overlay {
  position: fixed;
  top: 144px;
  left: calc(
    20vw + 0px
  ); /* 准确定位在jp-container右边，它占用了20%的视口宽度 */
  width: 544px;
  height: calc(100vh - 144px);
  z-index: 999;
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.custom-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dialog-body {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* 搜索区域样式 */
.search-area {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f5f7fa;
  padding: 15px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.search-item {
  margin-right: 20px;
  margin-bottom: 10px;
}

.search-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
}

.search-input,
.search-select {
  width: 220px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  background-color: #fff;
}

.button-group {
  display: flex;
}

.search-btn {
  height: 32px;
  padding: 0 15px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 10px;
  border: 1px solid #dcdfe6;
}

.search-btn.primary {
  background-color: #024dcc;
  color: white;
  border-color: #024dcc;
}

.search-btn.default {
  background-color: #fff;
  color: #606266;
}

/* 项目表格样式 */
.project-table {
  flex: 1;
  width: 100%;
  border: 1px solid #e4e7ed;
  overflow-y: auto;
}

.project-table table {
  width: 100%;
  border-collapse: collapse;
}

.project-row {
  height: 40px;
  border-bottom: 1px solid #e4e7ed;
  cursor: pointer;
}

.project-row:hover {
  background-color: #f5f7fa;
}

.project-name {
  padding: 10px 15px;
  color: #024dcc;
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 表格底部 */
.table-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
  color: #606266;
  font-size: 13px;
}

/* 右侧详情抽屉 - 修改定位 */
.custom-drawer {
  position: fixed;
  top: 144px;
  left: calc(20vw + 530px); /* 定位在项目列表弹窗右边 */
  height: calc(100vh - 144px);
  width: 530px;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.drawer-tab {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.blue-circle {
  width: 12px;
  height: 12px;
  background-color: #024dcc;
  border-radius: 50%;
  margin-right: 10px;
}

.drawer-close {
  font-size: 22px;
  color: #999;
  cursor: pointer;
}
.drawer-close.right {
  float: right;
  text-align: right;
}
.contract-items {
  padding: 15px 0;
  overflow-y: auto;
}

.contract-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.contract-item.active {
  background-color: #024dcc;
  color: white;
}

.contract-item:hover:not(.active) {
  background-color: #f5f7fa;
}

.contract-actions {
  padding: 15px;
  text-align: right;
}

.el-button {
  margin-left: 10px;
}
</style>